<template>
	<view class="content">
		<!-- 返回主页 -->
		<view class="back" @click="back">
			<view class="backicon"></view>
		</view>
		<view class="fun">
			<view style="margin-top: 10rpx;margin-left: 30rpx;color: #868686;
				font-size: 28rpx;font-weight: bold;">
				<text>基本信息</text>
			</view>
			<view class="infostyle">
				<text>姓名</text>
				<text style="float: right; color: #5e5e5e;">{{teachername}}</text>
			</view>
			<view class="infostyle">
				<text>工号</text>
				<text style="float: right;color: #5e5e5e;">{{tid}}</text>
			</view>
			<view class="infostyle" style="border-bottom: none;">
				<text>性别</text>
				<text style="float: right;color: #5e5e5e;" @click="updateSex">{{teacherinfo.sex}}</text>
			</view>
		</view>
		<view class="fun" style="margin-top: 30rpx;height: 300rpx;">
			<view style="margin-top: 10rpx;margin-left: 30rpx;color: #868686;font-size: 28rpx;font-weight: bold;">
				<text>其他信息</text>
			</view>
			<!-- 判断手机号框 -->
			<view v-if="!isPhoneFrame" class="infostyle">
				<text>手机号</text>
				<text v-if="teacherinfo.phone!=''" style="float: right;color: #5e5e5e;"
					@click="writePhone">{{teacherinfo.phone}}</text>
				<text v-else style="float: right;margin-right: 10rpx; color: dodgerblue;
					font-size: 30rpx;line-height: 59rpx;" @click="writePhone">填写手机号</text>
			</view>
			<view v-else class="infostyle">
				<text>手机号</text>
				<view style="float: right;margin-right: 10rpx; 
					font-size: 30rpx;line-height: 59rpx;">
					<uni-easyinput styles="borderColor=none" trim="all" v-model="phoneValue" placeholder="请输入手机号"
						@change="phoneChange"></uni-easyinput>
				</view>
				</text>
			</view>
			<view class="infostyle">
				<text>微信</text>
				<text style="float: right;color:dodgerblue;
					font-size: 30rpx;line-height: 53rpx;">已绑定</text>
			</view>
			<view class="infostyle" style="border-bottom: none;">
				<text>密码设置</text>
				<text style="float: right;color: dodgerblue;">></text>
				<text style="float: right;margin-right: 10rpx; color: dodgerblue;
					font-size: 30rpx;line-height: 53rpx;" 
					@click="ToUpdatePwd">修改密码</text>
			</view>
		</view>
		<view style="margin-top: 15rpx; color: #5e5e5e;">
			<text>*微信号一经绑定则不允许解绑</text>
		</view>
		<!-- //单击性别弹出性别选择框 -->
		
		<view class="infostyle">
			<uni-popup ref="popup" background-color="#fff" >
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="popup-footer">
						<text class="cancel" @click="cancel">取消</text>
						<text class="confirm" @click="confirm">确认</text>
					</view>
					<view class="popup-body">
						<uni-data-checkbox selectedColor="#000" mode="list" icon="right" v-model="valueSex"
							:localdata="range " @change="sexChange">{{range}}</uni-data-checkbox>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- //单击性别弹出性别选择框结束 -->
		<!-- 提示信息框位置 -->
		<view style="text-align: center;">
			<uni-popup ref="message" type="message">
				<uni-popup-message type="info" :message="messageText"  background-color="#fff" :duration="1000"></uni-popup-message>
			</uni-popup>
		</view>
		
		<!-- 提示信息结束 -->
	</view>
</template>

<script>
	import {
		HNIT_URL,
		TNAME
	} from "@/constants/index.js";
	import {
		data
	} from '../../../uni_modules/uview-ui/libs/mixin/mixin';
	export default {
		data() {
			return {
				teacher:"",
				teachername:"",
				sex:"",
				stuclass:"",
				tid:"",
				wxnum:"",
				phone:"",
				teacherinfo:[],
				valueSex: 0, //默认弹出层显示的性别为女
				range: [{   //性别的弹出层的类型
					"value": 1,
					"text": "男"
				}, {
					"value": 0,
					"text": "女"
				}],
				tempSex: {
					text: '',
					value: ''
				}, // 暂时存放性别的
				isPhoneFrame: false, //手机框是否存在
				phoneValue: '' ,//手机号,
			}
		},
		onLoad() {
			uni.setStorageSync("role", "1");// 上传角色 0为学生 1为老师 2为领导
			this.wxnum = uni.getStorageSync("username")
			this.teachername = uni.getStorageSync(TNAME)
			this.tid = uni.getStorageSync("name")
			// 请求参数
			let params = {
				tid: this.tid,
			}
			// 发起请求
			this.$request.post(HNIT_URL + "wx/selectTinfo", params).then(res => {
				this.teacherinfo = res
				if(this.teacherinfo.sex == 0){
					//使弹出层默认显示为用户的性别
					this.valueSex = 0;
					this.teacherinfo.sex = "女"
				} else {
					this.valueSex = 1;
					this.teacherinfo.sex = "男"
				}
			})
		},
		methods: {
			// 返回上一页
			back() {
				uni.reLaunch({
					url: '../../../pages/teacher/my/index'
				});
			},
			// 跳转到修改密码页面
			ToUpdatePwd(){
				uni.reLaunch({
					url: '../updatepwd/updatepwd'
				});
			},
			//打开老师性别弹出层
			updateSex() {
				this.$refs.popup.open('bottom')
				this.tempSex.text = this.teacherinfo.sex
				this.tempSex.value = this.valueSex
			},
			//关闭性别弹出层
			cancel() {
				this.$refs.popup.close();
			},
			//为回调函数的空实现
			sexChange(e) {
				this.tempSex = e.detail.data;
			},
			//性别弹出的确认按钮
			confirm() {
				if (this.tempSex.text == this.teacherinfo.sex) {
					this.$refs.popup.close();
				} else {
					// 请求参数
					let params = {
						tid: this.tid,
						sex: this.tempSex.value,
					}
					this.$request.post(HNIT_URL + "wx/updateTeacherSex", params).then(res => {
						if (res.msg == 0) {
							//使弹出层默认显示为用户的性别
						} else {
							//添加成功后
							this.teacherinfo.sex = this.tempSex.text
						}
						this.$refs.popup.close();
					})
			
				}
			},
			//打开手机号输入框
			writePhone() {
				this.isPhoneFrame = true;
			},
			//校验手机号是否合法
			phoneChange() {
				//关闭手机号输入框
				this.isPhoneFrame = false;
				const phone = this.phoneValue;
				if (phone.trim() === '') {
						this.showMessage('手机号填写不能为空')
				} else if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(phone)) {
					this.showMessage('手机号填写格式不对')
				} else {
					// 请求参数
					let params = {
						tid: this.tid,
						phone: phone,
					}
					this.$request.post(HNIT_URL + "wx/updateTeacherPhone", params).then(res => {
						if (res.msg == 0) {
							//使弹出层默认显示为用户的手机
								this.showMessage('手机号修改失败')
						} else {
						    this.showMessage('手机号修改成功')
							//添加成功后
							this.teacherinfo.phone = phone
						}
			
					})
				}
			
			
			
			},
			//提示信息
			showMessage(e){
				wx.showToast({
				     title: e,
				     icon: 'none',
				     duration: 2000//持续的时间
				   })
			}
		}
	}
</script>

<style>
	.infostyle{
		margin-top: 15rpx;
		margin-left: 30rpx;
		font-size: 35rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		width: 90%;
		border-bottom: 1rpx #c6c6c6 solid;
	}
	.fun{
		width: 95%;
		height: 290rpx;
		margin-top: 170rpx;
		background-color: white;
		border-radius: 20rpx;
	}
	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}
	
	.back {
		position: fixed;
		width: 80rpx;
		margin-top: -605rpx;
		height: 55rpx;
		margin-left: -640rpx;
		border-radius: 80rpx;
		border: 1rpx #c6c6c6 solid;
		backdrop-filter: blur(5px); /* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	/* 为性别弹出层得样式 */
	.popup-content {
		width: 100%;
		height: 250px;
		background-color: #fff;
		padding: 5px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	
	.popup-height {
		height: 25%;
	}
	
	.popup-footer {
		margin-top: 2%;
		height: 150px;
		display: flex;
		width: 95%;
	
	}
	
	.cancel {
		color: #999;
		width: 50%;
		text-align: left;
	}
	
	.confirm {
		color: #007aff;
		width: 50%;
		text-align: right;
	}
	
	.popup-body {
		margin-bottom: 15%;
	}
	/* 性别弹出层的结束 */
	page {
		background-color: #eeeeee;	
	}
	@keyframes aurora {
	  0% {
	    background-position-y: 0;
	  }
	  50% {
	    background-position-y: 100%;
	  }
	  100% {
	    background-position-y: 0;
	  }
	}
</style>
